<template>
	<!-- 调理方案 -->
	<view class="tiaoliPlan" v-if="plans && plans.treatPlans && plans.treatPlans.length > 0">
		<view class="plan-change">
			<image @click="CardChange(1)" class="change-img" :src="CarSrc1" mode=""></image>
			<image @click="CardChange(2)" class="change-img" :src="CarSrc2" mode=""></image>
			<image @click="CardChange(3)" class="change-img" :src="CarSrc3" mode=""></image>
			<image @click="CardChange(4)" class="change-img" :src="CarSrc4" mode=""></image>
		</view>
		<view class="plan-content">
			<!-- //饮食 -->
			<view class="plan-content1" v-show="Card1">
				<view class="plan-food">
					<text class="plan-food-title">饮食习惯</text>
					<view class="plan-list">
						<text
							class="plan-list-title">{{plans.treatPlans[0].diet_rehabilitation_v2022[0].eatingHabits[0].title}}：</text>
						<text
							class="plan-list-text">{{plans.treatPlans[0].diet_rehabilitation_v2022[0].eatingHabits[0].content}}</text>
					</view>
					<view class="plan-list2">
						<text
							class="plan-list-title2">{{plans.treatPlans[0].diet_rehabilitation_v2022[0].eatingHabits[1].title}}：</text>
						<text
							class="plan-list-text2">{{plans.treatPlans[0].diet_rehabilitation_v2022[0].eatingHabits[1].content}}</text>
					</view>
				</view>
				<view class="plan-food-recommend">
					<text class="plan-food2-title">膳食调养</text>
					<view class="plan-list2"
						v-for="item in plans.treatPlans[0].diet_rehabilitation_v2022[0].dietaryRecuperate">
						<view class="food-name">{{item.name}}</view>
						<view class="food-efficacys">
							<image class="food-img" :src="item.img" mode=""></image>
							<view># 引自：{{item.reference}}</view>
							<view># 功效：{{item.efficacy}}</view>
						</view>
						<view class="food-medicinals">
							<view class="food-medicinal-list">
								<view><text class="food-medicinal-list-title">药材：</text> <text
										class="food-medicinal-list-content">{{item.herbs}}</text><br /></view>
								<view><text class="food-medicinal-list-title">食材：</text> <text
										class="food-medicinal-list-content">{{item.food}}</text><br /></view>
								<view>
									<text class="food-medicinal-list-title">烹饪：</text>
									<view v-for="items in item.cookMethods" class="food-medicinal-list-content">
										<text>{{items}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			
			<!-- //运动 -->
			<view class="plan-content2" v-show="Card2">
				<view class="plan-sports">{{ plans.treatPlans[0].sports_health_care[0].message}}
				</view>
				<view class="plan-sports-video" v-for="item in plans.treatPlans[0].sports_health_care[0].items">
					<view class="sports-title">
						{{item.name}}
					</view>
					<text class="vedio-from">{{item.desc}}</text>
					<video class="sports-video" :src="item.player_url"></video>
				</view>
				<text class="sport-attention">{{plans.treatPlans[0].sports_health_care[1].message}}
					{{plans.treatPlans[0].sports_health_care[2].message}}</text>
			</view>

			
			
			<!-- //穴位 -->
			<view class="plan-content3" v-show="Card3">
				<view class="plan-acupoint">
					<view class="plan-acupoint-way">{{plans.treatPlans[0].massage_health_care[0].message}}</view>
					<br />
					<view class="plan-acupoint-way" v-for="item in clear(plans.treatPlans[0].massage_health_care[1].message)">
						<text>{{item.type}}</text>
						<br />
						<text>{{item.content}}</text>
					</view>
				</view>
				<view class="plan-acupoint-details" v-for="(item,index) in startFromIndexTwo" :key="index">
					<image class="plan-acupoint-details-image" :src="item.photo" mode=""></image>
					<view class="plan-acupoint-details-text">
						<text class="acupoint-title">{{item.bottom}}</text>
						<view class="acupoint-location" v-for="items in clear(item.desc)">
							<text>{{items.type}}</text>
							<br />
							<text>{{items.content}}</text>
						</view>
					</view>
				</view>
			</view>
			
			
			
			<!-- //情志调养 -->
			<view class="plan-content4" v-show="Card4">
				<view class="interest">情致调摄</view>
				<view class="plan-music">
					<view class="muscic-title">{{plans.treatPlans[0].recuperates[1].items[0].name}}</view>
					<text class="music-from">{{plans.treatPlans[0].recuperates[1].items[0].desc}}</text>
					<view class="progress" id="progress">

						<view class="cTime time">{{formatTime(currentTime.toFixed(0))}}</view>
						<slider id="meter" dindchange='sliderChange' activeColor="#14CDC9"
							block-size="12" backgroundColor="rgba(30, 30, 32, 1)" :min="0" :max="duration" :step="1"
							:value="currentTime" @changing="onSliderChanging" @change="onSliderChange" />
						<view class="tTime time">{{formatTime(duration.toFixed(0))}}</view>
					</view>
					<view>
						<image class="playing" v-show="true" @click="onPlay()" :src="MusicIcon"></image>
					</view>
				</view>
				<view class="music-text">
					{{plans.treatPlans[0].recuperates[1].message}}
				</view>
				<view class="music-daily">
					<view class="music-daily-title">起居调摄</view>
					<view class="music-daily-text">
						<text>{{plans.treatPlans[0].recuperates[3].message}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	import * as TongueApi from '@/api/tongue/tongue.js'
	import {
		computed
	} from "vue";
	export default {
		
		onLoad(options) {

			const paramsStr = options.params; // 获取URL查询参数中的params字段  
			//接收订单页面传来的子商品id和商品数量
			const receivedParams = JSON.parse(paramsStr); // 将参数字符串解析为对
			this.postId = receivedParams.postid
			this.reportid = receivedParams.reportid
			console.log(this.postId)
			
			this.healthInfo()
			this.CardChange(this.postId)
		},
		onUnload() {
			// 页面卸载时销毁音频实例
			  if (this.audioObj) {
			    this.audioObj.destroy();
			  }
			
		},
		computed: {
			// 计算属性，从下标为2的元素开始返回新数组  
			startFromIndexTwo() {
				const startIndex = 2;
				const result = [];
				for (let i = startIndex; i < this.plans.treatPlans[0].massage_health_care.length; i++) {
					const item = this.plans.treatPlans[0].massage_health_care[i];
					if (item.bottom) {
						result.push(item);
					}
				}
				return result;
			}
		},
		
		


		data() {
			return {
				plans: {},
				postId: null,
				reportid: null,
				Card1: true,
				CarSrc1: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_food_pressed%404x.png',
				Card2: false,
				CarSrc2: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_motion_default%404x.png',
				Card3: false,
				CarSrc3: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_pluse_default%404x.png',
				Card4: false,
				CarSrc4: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_music_default%404x.png',
				MusicIcon: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_play_pressed%404x.png',
				PlayStatu: true,
				iconshow: false,
				url: '', //音频路径
				duration: 0, //当前音频的长度
				currentTime: 0, //当前音频的播放位置
				audioObj: null,
				// 用户是否正在拖动滑块
				isSliding: false
			}
		},
		methods: {
			encodeChineseUrl(url) {
						// 将URL分割成不包含中文字符和包含中文字符的部分
						const parts = url.split('/');
						// 遍历并编码包含中文的部分
						for (let i = 0; i < parts.length; i++) {
							parts[i] = encodeURI(parts[i]).replace(/#/g, '%23').replace(/\?/g, '%3F');
						}
						// 再把分割后的数组重新组合成完整的URL
						return parts.join('/');
					},

			async healthInfo() {
				const res = await TongueApi.getszReport(this.reportid)
				this.plans = res.data.data.tongueResultVo
				console.log(this.plans)
				this.url = this.plans.treatPlans[0].recuperates[1].items[0].audio_url
				this.audioObj = uni.createInnerAudioContext();
				const that = this;
				this.audioObj.src = this.encodeChineseUrl(this.url)
				
				
				
				
				
				this.audioObj.onPlay(() => {
					// 设置定时器，定期更新 currentTime
					this.timer = setInterval(() => {
						this.confirm_value_input(this.audioObj.currentTime);
						// this.currentTime = this.audioObj.currentTime;
					}, 1000); // 每秒更新一次
				});

				const _this = this
				this.audioObj.onCanplay(res => {
					// 设置定时器获取音频时间(避免获取到NaN)
					let intervalID = setInterval(() => {
						this.duration = Math.floor(_this.audioObj.duration)
						// console.log("打印时间")
						// console.log(this.duration)
						if (!Number.isFinite(this.duration)) { // 如果时间是Infinity
							// 先设置时间为无限大，然后再重新设置为0
							// _this.innerAudioContext.seek(Number.MAX_SAFE_INTEGER)
							_this.audioObj.seek(0)
							// console.log("打印时间")
							// console.log(this.duration)

						}
						if (this.duration !== 0 && this.duration !== Infinity) {
							clearInterval(intervalID); // 清除定时器
						}
					}, 100);
				})


				this.audioObj.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});

				// 当音频停止时，清除定时器
				this.audioObj.onStop(() => {
					clearInterval(this.timer);
				});

				// 当音频自然播放至结束时，清除定时器
				this.audioObj.onEnded(() => {
					clearInterval(this.timer);
				});

				this.currentTime = this.audioObj.currentTime


			},
			

			onPlay() {
				if (this.iconshow) {
					this.audioObj.pause()
					this.MusicIcon = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_play_pressed%404x.png'
					this.iconshow = false

				} else {
					this.audioObj.play()
					this.currentTime = this.audioObj.currentTime
					this.MusicIcon = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_pause_pressed%404x.png'
					this.iconshow = true
				}

			},


			// 控制slider的函数
			slider_change() {
				console.log("完成一次拖动后触发的事件，event.detail = {value: value}");
			},
			confirm_value_input(value) {
				this.currentTime = value;
			},
			// 当用户开始拖动滑块时
			onSliderChanging(event) {
				this.isSliding = true;
				this.audioObj.currentTime = event.detail.value;
			},

			// 当用户释放滑块时
			onSliderChange(event) {
				this.isSliding = false;
				// 更新音频播放位置
				const newTime = event.detail.value;
				// 假设 innerAudioContext 是您的音频播放上下文
				this.audioObj.seek(newTime);
			},
			// 对秒数进行格式化
			formatTime(seconds) {
				const min = Math.floor(seconds / 60); // 计算分钟数
				const sec = seconds % 60; // 计算剩余秒数

				// 将分钟数和秒数转换为两位数格式
				const formattedMin = min.toString().padStart(2, '0');
				const formattedSec = sec.toString().padStart(2, '0');

				return `${formattedMin}:${formattedSec}`;
			},
			
			//清除<br>
			clear(e){
				let cleanedString = e.replace(/<br>/g, "");
				cleanedString=cleanedString.split('【').join('|【')
				cleanedString=cleanedString.split('|')
				let result=[]
				for(let i=1;i<cleanedString.length-1;i+=2){
					result.push({
						type:cleanedString[i],
						content:cleanedString[i+1]
					})
				}
				return result
			},
			
			CardChange(e) {
				if (e === 1) {
					this.audioObj.pause()
					this.MusicIcon = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/static/home/detection_btn_play_pressed%402x%281%29%20-%20%E5%89%AF%E6%9C%AC.png'
					this.iconshow = false
					this.Card1 = true;
					this.CarSrc1 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_food_pressed%404x.png';
					this.Card2 = false;
					this.CarSrc2 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_motion_default%404x.png';
					this.Card3 = false;
					this.CarSrc3 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_pluse_default%404x.png';
					this.Card4 = false;
					this.CarSrc4 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_music_default%404x.png';
				} else if (e === 2) {
					this.Card1 = false;
					this.CarSrc1 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_food_default%404x.png';
					this.Card2 = true;
					this.CarSrc2 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_motion_pressed%404x.png';
					this.Card3 = false;
					this.CarSrc3 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_pluse_default%404x.png';
					this.Card4 = false;
					this.CarSrc4 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_music_default%404x.png';
					this.audioObj.pause()
					this.MusicIcon = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/static/home/detection_btn_play_pressed%402x%281%29%20-%20%E5%89%AF%E6%9C%AC.png'
					this.iconshow = false
				} else if (e === 3) {
					this.Card1 = false;
					this.CarSrc1 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_food_default%404x.png';
					this.Card2 = false;
					this.CarSrc2 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_motion_default%404x.png';
					this.Card3 = true;
					this.CarSrc3 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_pluse_pressed%404x.png';
					this.Card4 = false;
					this.CarSrc4 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_music_default%404x.png';
					this.audioObj.pause()
					this.MusicIcon = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/static/home/detection_btn_play_pressed%402x%281%29%20-%20%E5%89%AF%E6%9C%AC.png'
					this.iconshow = false
				} else if (e === 4) {
					this.Card1 = false;
					this.CarSrc1 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_food_default%404x.png';
					this.Card2 = false;
					this.CarSrc2 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_motion_default%404x.png';
					this.Card3 = false;
					this.CarSrc3 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_pluse_default%404x.png';
					this.Card4 = true;
					this.CarSrc4 = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_music_pressed%404x.png';
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.tiaoliPlan {
		height: 100vh;
		width: 100vw;
		padding: 0;
		margin: 0;
		overflow-y: scroll;
		.plan-change {
			display: flex;
			justify-content: space-around;

			.change-img {
				margin-top: 10rpx;
				left: 0rpx;
				top: 0rpx;
				width: 150rpx;
				height: 186rpx;
				opacity: 1;
				border-radius: 14rpx;
			}
		}

		.plan-content {
			// border:1px solid black;
			margin: 50rpx 20rpx;
			padding-bottom: 30rpx;

			//饮食
			.plan-food {
				.plan-food-title {
					/** 文本1 */
					font-size: 32rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
					text-align: justify;
					vertical-align: top;

				}

				.plan-list {
					width: 680rpx;
					// height: 244rpx;
					opacity: 1;
					border-radius: 14rpx;
					background: rgba(255, 255, 255, 1);
					padding: 15rpx;
					margin: 20rpx 0;

					.plan-list-title {
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 45.54rpx;
						color: rgba(20, 205, 201, 1);
					}

					.plan-list-text {
						/** 文本2 */
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 45.54rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
					}
				}
				
				.plan-list2 {
					border-radius: 14rpx;
					background: rgba(255, 255, 255, 1);
					padding: 15rpx;
					margin: 20rpx 0;
				
					.plan-list-title2 {
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 45.54rpx;
						color: rgba(223, 161, 60, 1);
					}
				
					.plan-list-text2 {
						/** 文本2 */
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 45.54rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
					}
				}
			}

			.plan-food-recommend {
				margin-top: 50rpx;
				.plan-food2-title {
					/** 文本1 */
					font-size: 32rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
					text-align: justify;
					vertical-align: top;
				}

				.plan-list2 {
					margin: 20rpx 0;
					padding: 20rpx;
					width: 670rpx;
					opacity: 1;
					border-radius: 14rpx;
					background: rgba(255, 255, 255, 1);

					.food-name {
						height: 48rpx;
						opacity: 1;
						/** 文本1 */
						font-size: 32rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 46.34rpx;
						color: rgba(0, 0, 0, 1);
						text-align: justify;
						vertical-align: top;
					}

					.food-efficacys {
						margin: 20rpx 0;
						opacity: 1;
						/** 文本1 */
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 34.76rpx;
						color: rgba(20, 205, 201, 1);
						text-align: left;
						vertical-align: top;
						position: relative;

						.food-img {
							margin-top: -70rpx;
							margin-left: 536rpx;
							width: 142rpx;
							height: 142rpx;
							opacity: 1;
							border-radius: 8rpx;
							position: absolute;
						}

						view {
							margin-top: 10rpx;
						}
					}

					.food-medicinals {
						.food-medicinal-list-title {
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 40.54rpx;
							color: rgba(85, 85, 87, 1);
						}

						.food-medicinal-list-content {
							// margin-top: 5rpx;
							font-size: 25rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							color: rgba(0, 0, 0, 1);
						}

					}
				}
			}

			//运动
			.plan-sports {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(0, 0, 0, 1);
				text-align: justify;
				vertical-align: top;
			}

			.plan-sports-video {
				margin-top: 20rpx;
				margin-bottom: 40rpx;

				// border: 1px solid black;
				.sports-title {
					width: 448rpx;
					height: 48rpx;
					font-size: 32rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
					text-align: justify;
					vertical-align: top;

				}

				.vedio-from {
					width: 312rpx;
					height: 36rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(0, 0, 0, 1);
					text-align: justify;
					vertical-align: top;

				}

				.sports-video {
					top: 5rpx;
					width: 710rpx;
					height: 400rpx;
					opacity: 1;
					border-radius: 14rpx;
					background: rgba(30, 30, 32, 1);

				}
			}

			.sport-attention {
				margin-top: 20rpx;
				width: 686rpx;
				height: 140rpx;
				opacity: 1;
				/** 文本1 */
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(0, 0, 0, 1);
				text-align: justify;
				vertical-align: top;

			}

			//穴位
			.plan-acupoint {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(0, 0, 0, 1);
				text-align: justify;
				vertical-align: top;

				.plan-acupoint-way {
					padding: 10rpx 0;
				}
			}

			.plan-acupoint-details {
				position: relative;
				margin-top: 20rpx;
				height: 272rpx;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);

				.plan-acupoint-details-image {
					display: inline-block;
					margin: 20rpx 20rpx;
					width: 232rpx;
					height: 232rpx;
					opacity: 1;
					background: rgba(167, 167, 167, 1);
				}

				.plan-acupoint-details-text {
					position: absolute;
					top: 20rpx;
					left: 272rpx;
					padding-right: 10rpx;
					padding-bottom: 20rpx;
					.acupoint-title {
						width: 96rpx;
						height: 48rpx;
						opacity: 1;
						/** 文本1 */
						font-size: 32rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 46.34rpx;
						color: rgba(13, 209, 203, 1);
						text-align: justify;
						vertical-align: top;
					}

					.acupoint-location {

						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40.54rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;

						.location {
							/** 文本1 */
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 40.54rpx;
							color: rgba(13, 209, 203, 1);
						}

					}
				}

			}

			//情志调养
			.interest {
				width: 128rpx;
				height: 48rpx;
				/** 文本1 */
				font-size: 32rpx;
				font-weight: 600;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(0, 0, 0, 1);
				text-align: justify;
				vertical-align: top;

			}

			.plan-music {


				opacity: 1;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				background: rgba(255, 255, 255, 1);

				.muscic-title {
					box-sizing: border-box;

					margin-top: 20rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 32rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
					text-align: justify;
					vertical-align: top;

				}

				.music-from {
					margin-top: 4rpx;

					opacity: 1;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					color: rgba(85, 85, 87, 1);

				}

				.progress {
					margin-top: 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;


					.time {

						font-size: 24rpx;
						font-weight: 500;
						line-height: 34.76rpx;
						color: rgba(0, 0, 0, 1);
						vertical-align: top;

					}

					#meter {

						box-sizing: border-box;
						display: inline-block;
						width: 442rpx;
						opacity: 1;
						border-radius: 8rpx;
					}
				}

				.playing {
					margin: 30rpx 300rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					opacity: 1;

				}
			}

			.music-text {
				margin: 20rpx 0;
				width: 694rpx;
				height: 82rpx;
				opacity: 1;
				/** 文本1 */
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(0, 0, 0, 1);
				text-align: justify;
				vertical-align: top;

			}

			.music-daily {
				margin-top: 50rpx;
				.music-daily-title {
					margin: 20rpx 0;
					width: 128rpx;
					height: 48rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 32rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
					text-align: justify;
					vertical-align: top;

				}

				.music-daily-text {
					padding: 20rpx 20rpx;
					opacity: 1;
					border-radius: 14rpx;
					background: rgba(255, 255, 255, 1);
					/** 文本1 */
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(0, 0, 0, 1);
					text-align: justify;
					vertical-align: top;


				}
			}
		}
	}
	
	.tiaoliPlan::-webkit-scrollbar {
        display: none;
		
    }
</style>